<!doctype html>
<html class="no-js"  lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- META DATA -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!--font-family-->
    <link href="https://fonts.googleapis.com/css?family=Rufina:400,700" rel="stylesheet" />

    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet" />

    <!-- TITLE OF SITE -->
    <title>Travel</title>

    <!-- favicon img -->
    <link rel="shortcut icon" type="image/icon" th:href="@{/assets/logo/favicon.png}"/>

    <!--font-awesome.min.css-->
    <link rel="stylesheet" th:href="@{/assets/css/font-awesome.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/imgall.css}" />
    <!--animate.css-->
    <link rel="stylesheet" th:href="@{/assets/css/animate.css}" />

    <!--hover.css-->
    <link rel="stylesheet" th:href="@{/assets/css/hover-min.css}">

    <!--datepicker.css-->
    <link rel="stylesheet"  th:href="@{/assets/css/datepicker.css}" >

    <!--owl.carousel.css-->
    <link rel="stylesheet" th:href="@{/assets/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/owl.theme.default.min.css}"/>

    <!-- range css-->
    <link rel="stylesheet" th:href="@{/assets/css/jquery-ui.min.css}" />

    <!--bootstrap.min.css-->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}" />

    <!-- bootsnav -->
    <link rel="stylesheet" th:href="@{/assets/css/bootsnav.css}"/>

    <!--style.css-->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}" />

    <!--responsive.css-->
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
    your browser</a> to improve your experience and security.</p>
<![endif]-->

<!-- main-menu Start -->
<header class="top-area">
    <div class="header-area">
        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                    <div class="logo">
                        <a>
                            hotel<span>Nest</span>
                        </a>
                    </div><!-- /.logo-->
                </div><!-- /.col-->
                <div class="col-sm-10">
                    <div class="main-menu">

                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <i class="fa fa-bars"></i>
                            </button><!-- / button-->
                        </div><!-- /.navbar-header-->
                        <div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="smooth-menu"><a href="#home">hotel</a></li>
                                <li class="smooth-menu"><a href="#gallery">login</a></li>
                                <li class="smooth-menu"><a href="#pack">register </a></li>
                                <li class="smooth-menu"><a href="#spo">Special Offers</a></li>
                                <li class="smooth-menu"><a href="#blog">blog</a></li>
                                <li class="smooth-menu"><a href="#subs">subscription</a></li>
                                <li>
                                    <button class="book-btn">book now
                                    </button>
                                </li><!--/.project-btn-->
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.main-menu-->
                </div><!-- /.col-->
            </div><!-- /.row -->
            <div class="home-border"></div><!-- /.home-border-->
        </div><!-- /.container-->
    </div><!-- /.header-area -->

</header><!-- /.top-area-->

<section id="home" class="about-us">
    <div class="container">
        <div class="about-us-content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="single-about-us">
                        <div class="about-us-txt">
                            <h2>
                                Explore the Beauty of the Beautiful World

                            </h2>
                            <div class="about-btn">
                                <button  class="about-view">
                                    explore now
                                </button>
                            </div><!--/.about-btn-->
                        </div><!--/.about-us-txt-->
                    </div><!--/.single-about-us-->
                </div><!--/.col-->
                <div class="col-sm-0">
                    <div class="single-about-us">

                    </div><!--/.single-about-us-->
                </div><!--/.col-->
            </div><!--/.row-->
        </div><!--/.about-us-content-->
    </div><!--/.container-->

</section>

<section  class="travel-box">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="single-travel-boxes">
                    <div id="desc-tabs" class="desc-tabs">

                        <ul class="nav nav-tabs" role="tablist">

                            <li role="presentation" class="active">
                                <a aria-controls="tours" role="tab" data-toggle="tab">
                                    <i class="fa fa-tree"></i>
                                    hotel
                                </a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">

                            <div role="tabpanel" class="tab-pane active fade in" id="tours">
                                <div class="tab-para">

                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-sm-12">
                                            <div class="single-tab-select-box">

                                                <h2>Countries</h2>

                                                <div class="travel-select-icon">
                                                    <select class="form-control " id="country">

                                                        <option value="default">enter your destination country</option><!-- /.option-->

                                                        <option value="turkey">成都</option><!-- /.option-->

                                                        <!--                                                        <option value="russia">russia</option>&lt;!&ndash; /.option&ndash;&gt;-->
                                                        <!--                                                        <option value="egept">egypt</option>&lt;!&ndash; /.option&ndash;&gt;-->

                                                    </select><!-- /.select-->
                                                </div><!-- /.travel-select-icon -->

                                                <div class="travel-select-icon">
                                                    <input class="form-control " id="city" name="city" type="text" placeholder="input key word">
                                                    <!--                                                    <select class="form-control " id="city" name="city">-->

                                                    <!--                                                        <option value="default">enter your destination location</option>&lt;!&ndash; /.option&ndash;&gt;-->

                                                    <!--                                                        <option value="istambul">成都</option>&lt;!&ndash; /.option&ndash;&gt;-->

                                                    <!--                                                        <option value="mosko">宜宾</option>&lt;!&ndash; /.option&ndash;&gt;-->
                                                    <!--                                                        <option value="cairo">攀枝花</option>&lt;!&ndash; /.option&ndash;&gt;-->

                                                    <!--                                                    </select>&lt;!&ndash; /.select&ndash;&gt;-->
                                                </div><!-- /.travel-select-icon -->

                                            </div><!--/.single-tab-select-box-->
                                        </div><!--/.col-->

                                        <div class="col-lg-2 col-md-3 col-sm-4">
                                            <div class="single-tab-select-box">
                                                <h2>check in</h2>
                                                <div class="travel-check-icon">
                                                    <form action="#">
                                                        <input type="text" name="check_in" class="form-control" data-toggle="datepicker" placeholder="10/17/2019" id="checkin">
                                                    </form>
                                                </div><!-- /.travel-check-icon -->
                                            </div><!--/.single-tab-select-box-->
                                        </div><!--/.col-->

                                        <div class="col-lg-2 col-md-3 col-sm-4">
                                            <div class="single-tab-select-box">
                                                <h2>check out</h2>
                                                <div class="travel-check-icon">
                                                    <form action="#">
                                                        <input type="text" name="check_out" class="form-control"  data-toggle="datepicker" placeholder="22/01/2017 " id="checkout">
                                                    </form>
                                                </div><!-- /.travel-check-icon -->
                                            </div><!--/.single-tab-select-box-->
                                        </div><!--/.col-->

                                        <div class="col-lg-2 col-md-1 col-sm-4">
                                            <div class="single-tab-select-box">
                                                <h2>Adult</h2>
                                                <div class="travel-select-icon">

                                                    <select class="form-control " id="adu">

                                                        <option value="1">1</option><!-- /.option-->

                                                        <option value="2">2</option><!-- /.option-->

                                                        <option value="3">3</option><!-- /.option-->
                                                        <option value="4">4</option><!-- /.option-->
                                                        <option value="5">5</option><!-- /.option-->

                                                    </select><!-- /.select-->
                                                </div><!-- /.travel-select-icon -->
                                            </div><!--/.single-tab-select-box-->
                                        </div><!--/.col-->

                                        <div class="col-lg-2 col-md-1 col-sm-4">
                                            <div class="single-tab-select-box">
                                                <h2>Child</h2>
                                                <div class="travel-select-icon">
                                                    <select class="form-control " id="chi">

                                                        <option value="1">1</option><!-- /.option-->

                                                        <option value="2">2</option><!-- /.option-->

                                                        <option value="3">3</option><!-- /.option-->
                                                        <option value="4">4</option><!-- /.option-->

                                                    </select><!-- /.select-->
                                                </div><!-- /.travel-select-icon -->
                                            </div><!--/.single-tab-select-box-->
                                        </div><!--/.col-->

                                    </div><!--/.row-->

                                    <div class="row">
                                        <div class="clo-sm-7">
                                            <div class="about-btn travel-mrt-0 pull-right">
                                                <button  class="about-view travel-btn" onclick="serach()">
                                                    search
                                                </button><!--/.travel-btn-->
                                            </div><!--/.about-btn-->
                                        </div><!--/.col-->

                                    </div><!--/.row-->

                                </div><!--/.tab-para-->

                            </div><!--/.tabpannel-->



                        </div><!--/.tab content-->
                    </div><!--/.desc-tabs-->
                </div><!--/.single-travel-box-->
            </div><!--/.col-->
        </div><!--/.row-->
    </div><!--/.container-->

</section><!--/.travel-box-->

<section id="pack" class="packages">
    <div class="container">
        <div class="gallary-header text-center">
            <h2>
                special packages
            </h2>
            <p>
                Duis aute irure dolor in  velit esse cillum dolore eu fugiat nulla.
            </p>
        </div><!--/.gallery-header-->
        <div class="packages-content">
            <div class="row">
                <table>
                    <tr th:each="hotel:${hotels}">
                        <div class="col-md-4 col-sm-6">
                    <div class="single-package-item">
                        <img th:src="${hotel.photo1}" alt="package-place" class="hotel_img">
                        <div class="single-package-item-txt">
                            <h4 th:text="${hotel.getHotel_translated_name()}"> <span class="pull-right" th:text="${hotel.getRates_from()}"></span></h4>
                            <div class="packages-para">
                                <p>
											<span>
												<i class="fa fa-angle-right"></i><a>checkin &nbsp;</a> <a th:text="${hotel.getCheckin()}"></a>
											</span>
                                    <i class="fa fa-angle-right"></i><a th:text="${hotel.getStar_rating()}"></a><a> &nbsp;star accomodation</a>
                                </p>
                                <p>
											<span>
												<i class="fa fa-angle-right"></i>  <a>平均价格：</a><a th:text="${hotel.getRates_from()}"></a><a>RMB</a>
											</span>
                                    <i class="fa fa-angle-right"></i> <a th:text="${hotel.getNumberfloors()}"></a><a>&nbsp;floors &nbsp;</a><a th:text="${hotel.getNumberrooms()}"></a><a>&nbsp;rooms &nbsp;</a>
                                </p>
                            </div><!--/.packages-para-->
                            <div class="packages-review">
                                <p>
                                    <a>评分：</a><a th:text="${hotel.getRating_average()}"></a>
                                    <span th:text="${hotel.getNumber_of_reviews()}"></span><a>&nbsp;Reviews</a>
                                </p>
                            </div><!--/.packages-review-->
                            <div class="about-btn">
                                <button  class="about-view packages-btn">
                                    book now
                                </button>
                            </div><!--/.about-btn-->
                        </div><!--/.single-package-item-txt-->
                    </div><!--/.single-package-item-->

                </div><!--/.col-->
                    </tr>
                </table>

            </div><!--/.row-->
        </div><!--/.packages-content-->
    </div><!--/.container-->

</section><!--/.packages-->


<footer  class="footer-copyright">
    <div class="container">
        <hr>
        <div class="foot-icons ">
            <ul class="footer-social-links list-inline list-unstyled">
                <li><a href="#" target="_blank" class="foot-icon-bg-1"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#" target="_blank" class="foot-icon-bg-2"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#" target="_blank" class="foot-icon-bg-3"><i class="fa fa-instagram"></i></a></li>
            </ul>
            <p>&copy; 2017 <a href="#">ThemeSINE</a>. All Right Reserved. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">酒店预订</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页设计</a></p>

        </div><!--/.foot-icons-->
        <div id="scroll-Top">
            <i class="fa fa-angle-double-up return-to-top" id="scroll-Top" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i>
        </div><!--/.scroll-Top-->
    </div><!-- /.container-->

</footer><!-- /.footer-copyright-->
<!-- footer-copyright end -->




<script th:src="@{/assets/js/jquery.js}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

<!--modernizr.min.js-->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>


<!--bootstrap.min.js-->
<script  th:src="@{/assets/js/bootstrap.min.js}"></script>

<!-- bootsnav js -->
<script th:src="@{/assets/js/bootsnav.js}"></script>

<!-- jquery.filterizr.min.js -->
<script th:src="@{/assets/js/jquery.filterizr.min.js}"></script>

<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<!--jquery-ui.min.js-->
<script th:src="@{/assets/js/jquery-ui.min.js}"></script>

<!-- counter js -->
<script th:src="@{/assets/js/jquery.counterup.min.js}"></script>
<script th:src="@{/assets/js/waypoints.min.js}"></script>

<!--owl.carousel.js-->
<script  th:src="@{/assets/js/owl.carousel.min.js}"></script>

<!-- jquery.sticky.js -->
<script th:src="@{/assets/js/jquery.sticky.js}"></script>

<!--datepicker.js-->
<script  th:src="@{/assets/js/datepicker.js}"></script>

<!--Custom JS-->
<script th:src="@{/assets/js/custom.js}"></script>

<!--search.js-->
<script th:src="@{/assets/js/search.js}"></script>
<script th:src="@{/assets/js/ple_date.js}"></script>


</body>

</html>